<template>
  <div id="app">
    <div class="wrapper">
      <h3>学生录入系统</h3>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="姓名" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="ruleForm.age"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <br />
      <div>
        <el-button @click="adduser">增加用户</el-button>
      </div>
      <div><h3>用户信息表</h3></div>
      <div class="showData">
        <el-table :data="list" style="width: 100%">
          <el-table-column label="姓名" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.u1 }}</span>
            </template>
          </el-table-column>
          <el-table-column label="年龄" width="120">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.a1 }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="性别" width="120">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.g1 }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("年龄不能为空"));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error("请输入数字值"));
        } else {
          if (value < 101) {
            callback(new Error("必须小于100岁"));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    return {
      ruleForm: {
        username: "",
        age: 20,
        gender: "男",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        age: [{ validator: checkAge, trigger: "blur" }],
        gender: { required: true, message: "请选择性别", trigger: "change" },
      },
      list: [],
      options: [
        {
          value: "选项1",
          label: "男",
        },
        {
          value: "选项2",
          label: "女",
          disabled: true,
        },
      ],
    };
  },
  methods: {
    handleDelete(p1, p2) {
      this.list.splice(p1, 1);
    },
    adduser() {
      let u = this.ruleForm.username;
      let a = this.ruleForm.age;
      let g = this.ruleForm.gender;
      let t = Date.parse(new Date());

      if (u != "" && a > 0 && g != "") {
        let item = { u1: u, a1: a, g1: g, t1: t };
        this.list.push(item);
        this.username = "";
        this.age = 0;
        this.gender = "男";
      } else {
        let u = prompt("请输入你的名字");
        this.username = u;
        this.ruleForm.username = this.username;
      }
    },
  },
};
</script>

<style>
#app {
}
.wrapper {
  /* background-color: aqua; */
  width: 600px;
  margin: 0 auto;
}
</style>